//动画,littleTokyo
import * as THREE from "../node_modules/three/build/three.module.js";
import { GLTFLoader } from "../node_modules/three/examples/jsm/loaders/GLTFLoader";
import { OrbitControls } from "../node_modules/three/examples/jsm/controls/OrbitControls.js";
import { DRACOLoader } from "../node_modules/three/examples/jsm/loaders/DRACOLoader.js";
import Stats from "../node_modules/three/examples/jsm/libs/stats.module.js";

var scene, camera, light, renderer, loader, controls;
var model, skeleton;
var mixer,
  mixers = [],
  clips,
  idleAction,
  walkAction,
  runAction,
  actions,
  clock,
  stats;

function init() {
  //场景
  scene = new THREE.Scene();
  scene.background = new THREE.Color(0x81ecec);

  //相机
  camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1500
  );
  camera.position.set(500, 500, 500);
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  scene.add(camera);

  //渲染器
  renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  //控制器
  controls = new OrbitControls(camera, renderer.domElement);
  controls.target.set(0, 0.5, 0);
  controls.update();
  controls.enablePan = true;
  controls.enableDamping = true;

  //光
  scene.add(new THREE.HemisphereLight(0xffffff, 0x000000, 0.4));
  var dirLight = new THREE.DirectionalLight(0xffffff, 1);
  dirLight.position.set(5, 2, 8);
  scene.add(dirLight);

  //动画用
  clock = new THREE.Clock();

  //左上角状态
  stats = new Stats();
  document.body.appendChild(stats.dom);

  //环境反射纹理贴图
  //   var path = "../src/models/textures/cube/Park2/";
  //   var format = ".jpg";
  //   var envMap = new THREE.CubeTextureLoader().load([
  //     path + "posx" + format,
  //     path + "negx" + format,
  //     path + "posy" + format,
  //     path + "negy" + format,
  //     path + "posz" + format,
  //     path + "negz" + format,
  //   ]);

  //解码
  var dracoLoader = new DRACOLoader();
  dracoLoader.setDecoderPath(
    "../node_modules/three/examples/js/libs/draco/gltf/"
  );

  //加载模型
  loader = new GLTFLoader();
  loader.setDRACOLoader(dracoLoader);
  loader.load(
    "../src/models/LittlestTokyo.glb",

    //加载完成后
    function (gltf) {
      //Mesh
      model = gltf.scene;
      scene.add(model);

      //   model.traverse(function (child) {
      //     if (child.isMesh) child.material.envMap = envMap;
      //   });

      //动画
      console.log(gltf.animations);
      mixer = new THREE.AnimationMixer(model);
      mixer.clipAction(gltf.animations[0]).play();

      animate();
    },
    //加载中
    undefined,
    //加载失败
    function (error) {
      console.log(error);
    }
  );
}

function animate() {
  requestAnimationFrame(animate);
  //动画时钟
  // var delta = clock.getDelta();
  // mixer.update(delta);
  //控制器
  controls.update();
  //左上角帧数
  stats.update();
  renderer.render(scene, camera);
}

function reference() {
  //参考系
  var material1 = new THREE.LineBasicMaterial({ color: 0xd63031 }); //红
  var material2 = new THREE.LineBasicMaterial({ color: 0x55efc4 }); //绿
  var material3 = new THREE.LineBasicMaterial({ color: 0x0984e3 }); //蓝
  var geometry1 = new THREE.Geometry();
  var geometry2 = new THREE.Geometry();
  var geometry3 = new THREE.Geometry();
  geometry1.vertices.push(new THREE.Vector3(0, 0, 0));
  geometry2.vertices.push(new THREE.Vector3(0, 0, 0));
  geometry3.vertices.push(new THREE.Vector3(0, 0, 0));
  geometry1.vertices.push(new THREE.Vector3(10, 0, 0));
  geometry2.vertices.push(new THREE.Vector3(0, 10, 0));
  geometry3.vertices.push(new THREE.Vector3(0, 0, 10));
  var line1 = new THREE.Line(geometry1, material1);
  var line2 = new THREE.Line(geometry2, material2);
  var line3 = new THREE.Line(geometry3, material3);
  scene.add(line1);
  scene.add(line2);
  scene.add(line3);
}

init();
// reference();

//输出camera位置信息,平移相机,设置方块显示位置
// document.querySelector("canvas").onclick = function () {
//   console.log("controls.target", controls.target);
//   console.log("camera.position", camera.position);
// };
